﻿
<table class="table" style="width:100%">
    <tr>
        <td class="input-label-bottom" align="right" style="width:20%"><label>Customer Code:</label></td>
        <td class="input-box-bottom" style="width:20%">
            <input ng-model="CustomerCode" type="text" style="width: 100px" />
        </td>
        <td class="input-label-bottom" align="right" style="width:20%"><label>Company Name:</label></td>
        <td class="input-box-bottom" style="width:20%">
            <input ng-model="CompanyName" type="text" style="width: 300px" />
        </td>
        <td class="input-label-bottom" style="width:20%">
            <button class="btn btn-primary btn-large" ng-click="searchCustomers()">Search</button>
            <button class="btn btn-primary btn-large" ng-click="resetSearchFields()">Reset</button>
        </td>
    </tr>
</table>

<table class="table table-striped table-hover" style="width: 100%;">
    <thead>

        <tr>
            <th colspan="2" style="width: 50%">
                <span ng-bind="TotalCustomers"></span>&nbsp;Customers
            </th>
            <th colspan="5" style="text-align: right; width: 50%">
                Page&nbsp;<span ng-bind="CurrentPageNumber"></span>&nbsp;of&nbsp;
                <span ng-bind="TotalPages"></span>
            </th>
        </tr>

        <tr>
            <th ng:repeat="tableHeader in tableHeaders" ng:class="setSortIndicator(tableHeader.label)" ng:click="changeSorting(tableHeader.label)">{{tableHeader.label}}</th>
        </tr>

    </thead>
    <tbody>
        <tr ng-repeat="customer in customers">  
            <td style="width: 15%; height: 25px"><a ng-href="{{customerLink}}{{customer.CustomerID}}" style="cursor:pointer; text-decoration:underline; color:black">{{customer.CustomerCode}}</a></td>
            <td style="width: 20%; white-space: nowrap"><div ng-bind="customer.CompanyName"></div></td>
            <td style="width: 20%; white-space: nowrap"><div ng-bind="customer.Address"></div></td>
            <td style="width: 20%; white-space: nowrap"><div ng-bind="customer.City"></div></td>
            <td style="width: 10%; white-space: nowrap"><div ng-bind="customer.Region"></div></td>
            <td style="width: 15%; white-space: nowrap"><div ng-bind="customer.PostalCode"></div></td>
        </tr>
    </tbody>
</table>
